<template>
    <div class="search">
        <el-autocomplete clearable placeholder="请输入医院名称" v-model="searchkey" :fetch-suggestions="querySearchAsync" :trigger-on-focus="false" @select="handleSelect"/>
        <el-button type="primary" :icon="Search">搜索</el-button>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
//引入图标
import { Search} from '@element-plus/icons-vue'
//引入路由
import {useRouter} from 'vue-router'
import {HospitalSearchKey} from '@/api/home'
import type {HospitalSearchKeyData} from '@/api/home/type'
//搜索关键词
const searchkey=ref<string>('')
//创建路由
const $router=useRouter()
const querySearchAsync =async (keyword:string,cb:any) => {
    // 根据关键词获取医院数据
 const res:HospitalSearchKeyData= await HospitalSearchKey(keyword)
 if(res.code===200){
   //数据整理
   const showData=res.data.map(item=>{
    return{
        value:item.hosname,//医院名称
        hoscoode:item.hoscode//医院编码用于路由跳转
    }
   })
   cb(showData)
 }
}
//路由跳转
const handleSelect=(item:any)=>{
    console.log(item)
    $router.push({
        path:'/hospitaldetails/register',
        query: { hoscode: item.hoscoode },
    })
}
</script>

<style lang="less" scoped>
.search{
    width: 100%;
    height: 50px;
    display: flex;
    margin: 10px 0;
    justify-content: center;
    align-items: center;
   :deep(.el-input__wrapper){
        width: 600px;
        margin-right: 10px;
    }
}
</style>